<template>
  <div class="container">
    <Breadcrumb :items="['系统设置', '用户管理']" />
    <a-card class="general-card" :title="'用户管理'">
      <a-row>
        <a-col :flex="1">
          <a-row :gutter="24">
            <a-col :span="5">
              <div class="search-form">
                <a-form-item label="用户名">
                  <a-input v-model="username" placeholder="请输入用户名" />
                </a-form-item>
              
              </div>
            </a-col>
            <a-col :span="5">
              <div class="search-btn">
                <a-button type="primary" @click="search" style="margin-left:5%">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>

                <a-button @click="reset" style="margin-left:5%">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-divider />
      <div>
        <a-row>
          <a-col :span="12">
            <a-space>
              <a-button type="primary">
                <template #icon>
                  <icon-plus />
                </template>
                新建
              </a-button>
              <a-upload action="/">
                <template #upload-button>
                  <a-button>
                    批量导入
                  </a-button>
                </template>
              </a-upload>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <a-table :columns="columns" :data="data" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { findAllUser } from '@/api/user';
import { onMounted } from 'vue';
const username = ref('');
const data = reactive([]);
onMounted(() => {
  search();
});
const search = async () => {
  const parm = {
    username: username.value,
  };
  const res = await findAllUser(parm);
  data.splice(0, data.length, ...res.data);
};
const reset = () => {
  // listNumber.value = '';
  // listName.value = '';
  search();
};
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'username',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
];
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px;

  .search-btn {
  
    display: flex;

  }

  .search-form {
    width: 100%;
    display: flex;

  }
}
</style>